<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-autocomplete clearable v-model="queryForm.provinceName" class="filter-item" placeholder="省份" style="width: 125px;" :fetch-suggestions="querySearch" @select="handleSelectCity" @clear="clearProvince">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.cityName" class="filter-item" placeholder="城市" style="width: 125px;" :fetch-suggestions="querySearchCity" @select="handleSelectDistrict" @clear="clearCity">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.districtName" class="filter-item" placeholder="区" style="width: 125px;" :fetch-suggestions="querySearchDistrict" @select="handleSelectCommunity" @clear="clearCommunity">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.communityName" class="filter-item" placeholder="小区" style="width: 125px;" :fetch-suggestions="querySearchCommunity" @select="handleSelectBuildings" @clear="clearBuilding">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.buildName" class="filter-item" placeholder="楼栋" style="width: 125px;" :fetch-suggestions="querySearchBuildings" @select="handleSelectUnit" @clear="clearUnit">
      </el-autocomplete>
      <el-autocomplete clearable v-model="queryForm.unitName" class="filter-item" placeholder="单元" style="width: 125px;" :fetch-suggestions="querySearchUnit" @select="handleSelect" @clear="clearLast">
      </el-autocomplete> -->
      <el-select
        clearable
        v-model="queryForm.provinceId"
        class="filter-item"
        filterable
        placeholder="省份"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseProvince', 'query')"
      >
        <el-option
          v-for="(item, index) in provinces"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.cityId"
        class="filter-item"
        filterable
        placeholder="城市"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCity', 'query')"
      >
        <el-option
          v-for="(item, index) in citys"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.districtId"
        class="filter-item"
        filterable
        placeholder="区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseRegin', 'query')"
      >
        <el-option
          v-for="(item, index) in districts"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.communityId"
        class="filter-item"
        filterable
        placeholder="小区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCommunity', 'query')"
      >
        <el-option
          v-for="(item, index) in communitys"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.buildId"
        class="filter-item"
        filterable
        placeholder="楼栋"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseBuliding', 'query')"
      >
        <el-option
          v-for="(item, index) in buildings"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        v-model="queryForm.unitId"
        class="filter-item"
        filterable
        placeholder="单元"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseUnit', 'query')"
      >
        <el-option
          v-for="(item, index) in units"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        clearable
        style="width: 150px"
        class="filter-item"
        v-model="queryForm.status"
        placeholder="请选择房屋状态"
      >
        <el-option
          v-for="(val, key) in Dicts.CONSUMER_STATUS"
          :key="key"
          :label="val"
          :value="key"
        >
        </el-option>
      </el-select>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入小区名称"
        v-model.trim="queryForm.communityName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入楼栋名称"
        v-model.trim="queryForm.buildName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入单元名称"
        v-model.trim="queryForm.unitName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入房屋门牌号"
        v-model.trim="queryForm.number"
      >
      </el-input>
      <el-button
        class="filter-item"
        @click="doSearchQuery"
        type="primary"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        class="filter-item"
        v-permission="'house:add'"
        style="margin-left: 10px;"
        @click="openCreateDialog"
        type="success"
        icon="el-icon-plus"
        >新增</el-button
      >
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        @click="openFileDialog()"
        type="info"
        icon="el-icon-upload2"
        >批量新增</el-button
      >
    </div>
    <el-table v-loading="loading" :data="records" style="width: 100%">
      <el-table-column prop="rowId" label="房间ID" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="villageName"
        label="省/市/区"
        width="450"
        align="center"
      >
        <template slot-scope="scope">
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName !== undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}/${scope.row.villageName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName === undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}`
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="communityName"
        label="小区名称"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="number"
        label="大楼/单元/楼层/室"
        width="250"
        align="center"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.floorName !== undefined">
            {{
              `${scope.row.buildName}栋/${scope.row.unitName}单元/${scope.row.floorName}层/${scope.row.number}室`
            }}
          </template>
          <template v-if="scope.row.floorName === undefined">
            {{
              `${scope.row.buildName}栋/${scope.row.unitName}单元/${scope.row.number}室`
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="openPhone"
        label="开门电话"
        width="250"
        align="center"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.openPhone !== undefined">
            {{
              scope.row.openPhone.substr(0, 3) +
                '*****' +
                scope.row.openPhone.slice(8)
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="房屋状态"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.CONSUMER_STATUS[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column prop="tag" label="房屋标记" width="150" align="center">
        <template slot-scope="scope">
          {{ Dicts.HOUSE_TAG[scope.row.tag] }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding "
        width="270"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="queryDoorById(scope.row.rowId)"
            title="卡列表"
            icon="el-icon-tickets"
            circle
            v-permission="'house:cardList'"
          ></el-button>
          <el-button
            size="mini"
            @click="queryResidentById(scope.row.rowId)"
            title="住户列表"
            icon="el-icon-search"
            circle
            v-permission="'house:residentList'"
          ></el-button>
          <el-button
            type="primary"
            size="mini"
            @click="editExample(scope.row)"
            icon="el-icon-edit"
            circle
            title="编辑房屋"
            v-permission="'house:update'"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.rowId)"
            icon="el-icon-delete"
            circle
            title="删除房屋"
            v-permission="'house:delete'"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="`新增房屋`"
      :visible.sync="addHouseFormVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addHouseForm"
        label-width="100px"
        :rules="addHouseFormRules"
        ref="addHouseForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="省份" prop="provinceId">
              <el-select
                clearable
                v-model="addHouseForm.provinceId"
                filterable
                placeholder="省份"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseProvince', 'addHouse')"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房屋门牌号" prop="number">
              <el-input
                v-model.trim="addHouseForm.number"
                placeholder="房屋门牌号"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="城市" prop="cityId">
              <el-select
                clearable
                v-model="addHouseForm.cityId"
                filterable
                placeholder="城市"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseCity', 'addHouse')"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开门电话" prop="openPhone">
              <el-input
                v-model.trim="addHouseForm.openPhone"
                placeholder="开门电话"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="区县" prop="districtId">
              <el-select
                clearable
                v-model="addHouseForm.districtId"
                filterable
                placeholder="区县"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseRegin', 'addHouse')"
              >
                <el-option
                  v-for="(item, index) in districts"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房间数量" prop="roomNum">
              <el-input
                v-model.trim="addHouseForm.roomNum"
                placeholder="房间数量"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="小区" prop="communityId">
              <el-select
                clearable
                v-model="addHouseForm.communityId"
                class="filter-item"
                filterable
                placeholder="小区"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseCommunity', 'addHouse')"
              >
                <el-option
                  v-for="(item, index) in communitys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房屋标记" prop="tag">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="addHouseForm.tag"
              >
                <el-option
                  v-for="(val, key) in Dicts.HOUSE_TAG"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="楼栋:" prop="buildingId">
              <el-select
                clearable
                v-model="addHouseForm.buildId"
                class="filter-item"
                filterable
                placeholder="楼栋"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseBuliding', 'addHouse')"
              >
                <el-option
                  v-for="(item, index) in buildings"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="呼叫方式" prop="callMode">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="addHouseForm.callMode"
              >
                <el-option
                  v-for="(val, key) in Dicts.CALL_MODE"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单元:" prop="unitId">
              <el-select
                v-model="addHouseForm.unitId"
                class="filter-item"
                filterable
                placeholder="单元"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseUnit', 'addHouse')"
              >
                <el-option
                  v-for="(item, index) in units"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房屋状态" prop="status">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="addHouseForm.status"
              >
                <el-option
                  v-for="(val, key) in Dicts.CONSUMER_STATUS"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addHouseFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveHouseForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="批量新增房屋" :visible.sync="fileVisible" width="30%">
      <el-form
        :model="addHouseForm"
        label-width="100px"
        :rules="addHouseFormRules"
        ref="fileForm"
      >
        <el-form-item label="省份" prop="provinceId">
          <el-select
            clearable
            v-model="addHouseForm.provinceId"
            filterable
            placeholder="省份"
            style="width: 100%;"
            @change="value => cascade(value, 'chooseProvince', 'addHouse')"
          >
            <el-option
              v-for="(item, index) in provinces"
              :key="index"
              :value="item.rowId"
              :label="item.cnName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市" prop="cityId">
          <el-select
            clearable
            v-model="addHouseForm.cityId"
            filterable
            placeholder="城市"
            style="width: 100%;"
            @change="value => cascade(value, 'chooseCity', 'addHouse')"
          >
            <el-option
              v-for="(item, index) in citys"
              :key="index"
              :value="item.rowId"
              :label="item.cnName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="区县" prop="districtId">
          <el-select
            clearable
            v-model="addHouseForm.districtId"
            filterable
            placeholder="区县"
            style="width: 100%;"
            @change="value => cascade(value, 'chooseRegin', 'addHouse')"
          >
            <el-option
              v-for="(item, index) in districts"
              :key="index"
              :value="item.rowId"
              :label="item.cnName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="小区" prop="communityId">
          <el-select
            v-model="addHouseForm.communityId"
            filterable
            class="filter-item"
            placeholder="小区"
            style="width: 100%;"
            @change="value => cascade(value, 'chooseCommunity', 'addHouse')"
          >
            <el-option
              v-for="(item, index) in communitys"
              :key="index"
              :value="item.rowId"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="楼栋:" prop="buildingId">
              <el-select clearable v-model="addHouseForm.buildId" class="filter-item" filterable placeholder="楼栋" style="width: 100%;" @change="(value) => cascade(value, 'chooseBuliding', 'addHouse')">
                <el-option v-for="(item, index) in buildings" :key="index" :value="item.rowId" :label="item.name"></el-option>
              </el-select>
            </el-form-item>

        <el-form-item label="单元:" prop="unitId">
              <el-select v-model="addHouseForm.unitId" class="filter-item" filterable placeholder="单元" style="width: 100%;" @change="(value) => cascade(value, 'chooseUnit', 'addHouse')">
                <el-option v-for="(item, index) in units" :key="index" :value="item.rowId" :label="item.name"></el-option>
              </el-select>
            </el-form-item> -->

        <el-form-item label="房屋模板" prop="file">
          <el-row>
            <el-col :span="12">
              <el-upload
                class="upload-demo"
                action=""
                :limit="1"
                ref="avatarInput"
                :on-change="handleChange"
                :auto-upload="false"
                accept="execl"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  只能上传xls文件,替换文件请先移除已选中的文件
                </div>
              </el-upload>
            </el-col>
            <el-col :span="12">
              <el-button
                type="primary"
                size="small"
                onclick="location.href='http://keisdom.oss-cn-hangzhou.aliyuncs.com/templates/house_template_v1.0.xls'"
                >下载模板</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fileVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadFile">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`${exampleForm.rowId ? '编辑' : '编辑'}房屋`"
      :visible.sync="dialogFormVisible"
      width="20%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="exampleForm"
        label-width="110px"
        :rules="exampleFormRules"
        ref="exampleForm"
      >
        <el-form-item label="房屋门牌号:" prop="number">
          <el-input
            v-model.trim="exampleForm.number"
            placeholder="房屋门牌号"
            auto-complete="off"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="开门电话" prop="openPhone">
          <el-input
            v-model.trim="exampleForm.openPhone"
            placeholder="开门电话"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="房屋状态" prop="status">
          <el-select
            placeholder="可选"
            style="width: 100%;"
            v-model="exampleForm.status"
          >
            <el-option
              v-for="(val, key) in Dicts.CONSUMER_STATUS"
              :key="key"
              :label="val"
              :value="key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房屋标记" prop="tag">
          <el-select
            placeholder="可选"
            style="width: 100%;"
            v-model="exampleForm.tag"
          >
            <el-option
              v-for="(val, key) in Dicts.HOUSE_TAG"
              :key="key"
              :label="val"
              :value="key"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editHouse">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`${detailForm.rowId ? '查看' : '查看'}住户详情`"
      :visible.sync="detailFormVisible"
      width="70%"
    >
      <el-table v-loading="loading" :data="detailRecords" style="width: 100%">
        <el-table-column prop="rowId" label="编号" width="100">
        </el-table-column>
        <el-table-column prop="realName" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="cardNo" label="卡号" width="200">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="150">
        </el-table-column>
        <el-table-column prop="relationType" label="住户类型" width="100">
          <template slot-scope="scope">
            {{ Dicts.HOUSE_USER_RELATION_TYPE[scope.row.relationType] }}
          </template>
        </el-table-column>
        <el-table-column prop="isAdmin" label="是否管理员" width="120">
          <template slot-scope="scope">
            {{ Dicts.RESIDENT_IS_ADMIN[scope.row.isAdmin] }}
          </template>
        </el-table-column>
        <el-table-column prop="isVideoCall" label="视频通话" width="100">
          <template slot-scope="scope">
            {{ Dicts.VIDEO_CALL[scope.row.isVideoCall] }}
          </template>
        </el-table-column>
        <el-table-column prop="callLevel" label="优先级" width="100">
          <template slot-scope="scope">
            {{ Dicts.CALL_LEVEL[scope.row.callLevel] }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          class-name="small-padding "
          fixed="right"
          width="220px"
        >
          <template slot-scope="scope">
            <template
              v-if="scope.row.cardNo === null || scope.row.cardNo === undefined"
            >
              <el-button
                type="warning"
                size="mini"
                @click="openBindDoorCard(scope.row)"
                icon="el-icon-setting"
                circle
                title="绑定门卡"
              ></el-button>
            </template>
            <template v-if="scope.row.isAdmin != 1">
              <el-button
                type="success"
                v-permission="'house:upgradeAdmin'"
                size="mini"
                @click="upgradeAdmin(scope.row)"
                icon="el-icon-goods"
                circle
                title="升级成为管理员"
              ></el-button>
            </template>
            <el-button
              type="primary"
              v-permission="'house:setPriority'"
              size="mini"
              @click="setPriority(scope.row)"
              v-if="scope.row.callLevel == 0"
              icon="el-icon-goods"
              circle
              title="设置优先级"
            ></el-button>
            <el-button
              type="default"
              v-permission="'house:setVideoCall'"
              size="mini"
              @click="setVideoCall(scope.row)"
              icon="el-icon-setting"
              circle
              title="设置视频通话"
            ></el-button>
            <el-button
              type="danger"
              v-permission="'house:delResident'"
              size="mini"
              @click="delResident(scope.row)"
              icon="el-icon-close"
              circle
              title="删除住户"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      :title="`选择门卡`"
      :visible.sync="bindDoorCardFormVisible"
      width="30%"
    >
      <el-form
        :model="bindDoorCardForm"
        label-width="80px"
        :rules="bindDoorCardFormRules"
        ref="bindDoorCardForm"
      >
        <el-row>
          <el-col :span="16">
            <el-form-item label="门卡:" prop="doorCardId">
              <el-select
                v-model="bindDoorCardForm.doorCardId"
                placeholder="请选择门卡"
                style="width: 100%;"
                filterable
              >
                <el-option
                  v-for="(item, index) in doorCards"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cardNo"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bindDoorCardFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBindDoorCard(bindDoorCardForm)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="`${doorCardForm.houseId ? '查看' : '查看'}卡列表`"
      :visible.sync="doorCardFormVisible"
      width="50%"
    >
      <el-table v-loading="loading" :data="doorCardList" style="width: 100%">
        <el-table-column prop="rowId" label="卡编号" width="80">
        </el-table-column>
        <el-table-column prop="cardNo" label="卡号" width="200">
        </el-table-column>
        <el-table-column prop="expDate" label="有效期" width="200">
        </el-table-column>
        <el-table-column prop="isWarrant" label="授权状态" width="150">
          <template slot-scope="scope">
            {{ Dicts.IS_WARRANT[scope.row.isWarrant] }}
          </template>
        </el-table-column>
        <el-table-column prop="realName" label="持卡人姓名" width="150">
        </el-table-column>
        <el-table-column prop="phone" label="持卡人电话" width="150">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          class-name="small-padding "
          fixed="right"
          width="250px"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              v-if="scope.row.status != 3"
              @click="dcWrite(scope.row.cardNo, scope.row.rowId)"
              v-permission="'house:dcWrite'"
              icon="el-icon-edit"
              circle
              title="发卡"
            ></el-button>
            <el-button
              type="success"
              size="mini"
              v-if="scope.row.status != 3"
              @click="doorCardDelay(scope.row.rowId, scope.row.expDate)"
              v-permission="'house:doorCardDelay'"
              icon="el-icon-time"
              circle
              title="延期"
            ></el-button>
            <el-button
              size="mini"
              type="warning"
              v-if="
                (scope.row.isWarrant == 0) |
                  (scope.row.isWarrant == '') |
                  (scope.row.isWarrant == undefined) && scope.row.status != 3
              "
              @click="doorCardGrant(scope.row)"
              circle
              title="授权"
              icon="el-icon-setting"
            ></el-button>
            <el-button
              size="mini"
              type="warning"
              v-if="scope.row.isWarrant == 1 && scope.row.status != 3"
              @click="doorCardGrant(scope.row)"
              circle
              title="解除授权"
              icon="el-icon-setting"
            ></el-button>
            <el-button
              size="mini"
              type="warning"
              v-if="scope.row.status != 3"
              @click="handleLogOut(scope.row.rowId)"
              circle
              title="注销"
              v-permission="'house:handleLogOut'"
              icon="el-icon-close"
            ></el-button>
            <el-button
              size="mini"
              type="warning"
              v-if="scope.row.status == 1 && scope.row.status != 3"
              @click="LossCard(scope.row.rowId)"
              v-permission="'house:LossCard'"
              circle
              title="挂失"
              icon="el-icon-warning"
            ></el-button>
            <el-button
              type="success"
              size="mini"
              v-if="scope.row.status == 2 && scope.row.status != 3"
              @click="activationCard(scope.row.rowId, scope.row.phone)"
              v-permission="'house:activationCard'"
              title="激活"
              icon="el-icon-check"
              circle
            ></el-button>
            <!-- <el-button type="danger" size="mini" @click="doorCardDelete(scope.row.rowId)" icon="el-icon-close" circle title="删除"></el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="filter-container">
        <el-button
          class="filter-item"
          v-permission="'house:addCard'"
          style="margin-top: 35px;margin-left: 85%;"
          @click="openDoorCardDialog(doorCardForm.houseId)"
          type="success"
          >新增</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :title="`${editForm.rowId ? '添加' : '添加'}卡`"
      :visible.sync="doorCardDialogFormVisible"
      width="25%"
    >
      <el-form
        :model="editForm"
        label-width="120px"
        :rules="editFormRules"
        ref="editForm"
      >
        <el-row>
          <el-col>
            <el-form-item label="卡号获取方式:" prop="cardAccess">
              <el-select
                placeholder="请选择卡号获取方式"
                style="width: 100%;"
                v-model="editForm.cardAccess"
                @change="chooseCardAccess"
              >
                <el-option
                  v-for="(val, key) in Dicts.CARD_ACCESS"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="cardBatch">
          <el-col :span="18">
            <el-form-item label="卡批次:">
              <el-input
                v-model="editForm.batchNo"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button @click="getCardNo" type="success">获取</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="卡号:" prop="cardNo">
              <el-input
                v-model="editForm.cardNo"
                auto-complete="off"
                :disabled="showCardNo"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="领卡人姓名:" prop="owerName">
              <el-input
                v-model="editForm.owerName"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="领卡人手机号:" prop="owerPhone">
              <el-input
                v-model="editForm.owerPhone"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="领卡人身份证:" prop="owerIdcard">
              <el-input
                v-model="editForm.owerIdcard"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="doorCardDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDoorCardHouse(editForm.rowId)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="`卡${doorCardDelayForm.rowId ? '延期' : '延期'}`"
      :visible.sync="doorCardDelayFormVisible"
      width="40%"
    >
      <el-form
        :model="doorCardDelayForm"
        label-width="200px"
        :rules="doorCardDelayFormRules"
        ref="doorCardDelayForm"
      >
        <el-row>
          <el-col :span="16">
            <el-form-item label="延期日期:" prop="expdate">
              <el-date-picker
                :picker-options="pickerStartTime"
                v-model="doorCardDelayForm.expdate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="doorCardDelayFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDoorCardDelay(doorCardDelayForm)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryHouse,
  deleteHouse,
  saveHouse,
  selectAllCommunity,
  selectByCommunityIdBuilding,
  selectByBuildingUnit,
  selectResidentByHouseId,
  deleteResident,
  editVideoCall,
  upgradeOwner,
  updatePriority,
  queryDoorCardNoAndExpDateByHouseId,
  queryDoorCardByBatchNo,
  addDoorCardHouseAndUpdateDoorCard,
  editDoorCard,
  editDoorCardDelay,
  queryDoorCardByHouseId,
  saveDoorCardUserReal,
  uploadHouseFile
} from '@/api/community'
import { queryProvince, getCity, getDistrict } from '@/api/area'
import {
  deleteDoorCard,
  cancelDoorCard,
  activationDoorCard,
  grantDoorCard,
  reportTheLoss
} from '@/api/card'

export default {
  name: 'house',
  data() {
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('门牌号不能为空'))
      }
      if (!/^[0-9]{4}$/.test(value)) {
        callback(new Error('请输入4位数字'))
      } else {
        callback()
      }
    }
    var checkPhone = (rule, value, callback) => {
      if (value) {
        if (
          !(
            /^((0\d{2,3})-?)(\d{7,8})(-(\d{3,}))?$/.test(value) ||
            /^(1[345789]\d{9})$/.test(value)
          )
        ) {
          callback(new Error('请输入正确的号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var checkNum = (rule, value, callback) => {
      if (value) {
        if (!/^[0-9]$/.test(value)) {
          callback(new Error('请输入数字'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      bindDoorCardFormVisible: false,
      fileVisible: false,
      bindDoorCardForm: [],
      cardBatch: false,
      showCardNo: false,
      loading: false,
      dialogFormVisible: false,
      detailFormVisible: false,
      doorCardFormVisible: false,
      doorCardDialogFormVisible: false,
      doorCardDelayFormVisible: false,
      addHouseFormVisible: false,
      addHouseForm: [],
      detailForm: [],
      exampleForm: [
        {
          rowId: undefined,
          provinceId: '',
          provinceName: '',
          cityId: '',
          districtId: '',
          townId: '',
          villageId: '',
          name: '',
          code: '',
          type: '',
          status: '',
          tel: ''
        }
      ],
      pickerStartTime: {
        disabledDate: time => {
          return (
            time.getTime() < new Date(this.doorCardDelayForm.expdate).getTime()
          )
        }
      },
      editForm: {
        rowId: 0,
        houseId: '',
        batchNo: '',
        cardNo: '',
        owerName: '',
        owerPhone: '',
        owerIdcard: '',
        cardBatchId: ''
      },
      doorCardDelayForm: {
        rowId: 0,
        expdate: ''
      },
      provinces: [],
      citys: [],
      districts: [],
      communitys: [],
      buildings: [],
      units: [],
      bindDoorCardFormRules: {
        doorCardId: [
          { required: true, message: '请选择门卡', trigger: 'change' }
        ]
      },
      exampleFormRules: {
        number: [{ validator: checkCode, trigger: 'blur' }],
        openPhone: [{ validator: checkPhone, trigger: 'blur' }]
      },
      addHouseFormRules: {
        number: [{ validator: checkCode, trigger: 'blur' }],
        openPhone: [{ validator: checkPhone, trigger: 'blur' }],
        callMode: [
          { required: true, message: '请选择呼叫方式', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择房屋状态', trigger: 'change' }
        ],
        roomNum: [{ validator: checkNum, trigger: 'blur' }]
      },
      editFormRules: {
        cardNo: [{ required: true, message: '请获取卡号', trigger: 'blur' }],
        cardAccess: [
          { required: true, message: '请选择卡号获取方式', trigger: 'change' }
        ]
      },
      doorCardDelayFormRules: {
        expdate: [{ required: true, message: '请选择日期', trigger: 'blur' }]
      },
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        ascs: '',
        descs: '',
        importance: undefined,
        title: undefined,
        cnName: undefined
      },
      records: [],
      detailRecords: [],
      doorCardList: [],
      doorCardForm: [],
      reader: null,
      doorCards: [],
      rowId: ''
    }
  },
  created() {
    this.doQuery()
    this.readerd8().then(d8 => {
      this.reader = d8
    })
  },
  methods: {
    openFileDialog() {
      this.addHouseForm = {}
      this.citys = []
      this.districts = []
      this.towns = []
      this.villages = []
      this.units = []
      this.buildings = []
      this.communitys = []
      this.fileForm = {}
      this.fileVisible = true
      this.$refs.fileForm && this.$refs.fileForm.resetFields()
    },
    uploadFile() {
      const excle = new FormData()
      excle.append('file', this.fileForm.param)
      excle.append('communityName', this.addHouseForm.communityName)
      excle.append('cityId', this.addHouseForm.cityId)
      excle.append('communityId', this.addHouseForm.communityId)
      excle.append('provinceId', this.addHouseForm.provinceId)
      excle.append('districtId', this.addHouseForm.districtId)
      // excle.append('buildId', this.addHouseForm.buildId)
      // excle.append('buildName', this.addHouseForm.buildingName)
      // excle.append('unitId', this.addHouseForm.unitId)
      // excle.append('unitName', this.addHouseForm.unitName)
      uploadHouseFile(excle).then(({ data: { data, msg } }) => {
        this.fileVisible = false
        this.$refs.avatarInput.clearFiles()
        this.doQuery()
        this.$message({
          showClose: true,
          message: '导入成功',
          type: 'success'
        })
      })
    },
    handleChange(file, fileList) {
      if (
        file.name.substring(file.name.lastIndexOf('.'), file.name.length) !==
        '.xls'
      ) {
        this.$message({
          showClose: true,
          message: '只能上传xls文件',
          type: 'error'
        })
        this.$refs.avatarInput.clearFiles()
        return
      }
      this.fileForm.param = file.raw
    },
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doSearchQuery() {
      this.queryForm.current = 1
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      queryHouse(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
      queryProvince().then(({ data: { data } }) => {
        this.provinces = data
        this.loading = false
      })
    },
    openBindDoorCard({ houseId, userId }) {
      this.bindDoorCardForm = {}
      this.bindDoorCardForm.userId = userId
      this.bindDoorCardForm.houseId = houseId
      this.bindDoorCardFormVisible = true
      queryDoorCardByHouseId(houseId).then(({ data: { code, data, msg } }) => {
        if (data[0] === null) {
          this.doorCards = []
        } else {
          this.doorCards = data
        }
      })
    },
    saveBindDoorCard(bindDoorCardForm) {
      this.bindDoorCardForm.status = '1'
      this.$refs.bindDoorCardForm.validate(valid => {
        if (valid) {
          saveDoorCardUserReal(this.bindDoorCardForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.queryResidentById(this.bindDoorCardForm.houseId)
                this.bindDoorCardFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    cascade(rowId, level, param) {
      if (param === 'query') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.queryForm.cityId = ''
                this.queryForm.districtId = ''
                this.queryForm.communityId = ''
                this.queryForm.buildId = ''
                this.queryForm.unitId = ''
                this.citys = []
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.units = []
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.queryForm.districtId = ''
                this.queryForm.communityId = ''
                this.queryForm.buildId = ''
                this.queryForm.unitId = ''
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.units = []
                this.districts = data
              })
              return
            case 'chooseRegin':
              selectAllCommunity(rowId).then(({ data: { data } }) => {
                this.queryForm.communityId = ''
                this.queryForm.buildId = ''
                this.queryForm.unitId = ''
                this.communitys = []
                this.buildings = []
                this.units = []
                this.communitys = data
              })
              return
            case 'chooseCommunity':
              selectByCommunityIdBuilding(rowId).then(({ data: { data } }) => {
                this.queryForm.buildId = ''
                this.queryForm.unitId = ''
                this.buildings = []
                this.units = []
                this.buildings = data
              })
              return
            case 'chooseBuliding':
              selectByBuildingUnit(rowId).then(({ data: { data } }) => {
                this.queryForm.unitId = ''
                this.units = []
                this.units = data
              })
              return
            case 'chooseUnit':
              selectByBuildingUnit(this.queryForm.buildId).then(
                ({ data: { data } }) => {
                  this.units = data
                }
              )
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.queryForm.cityId = ''
              this.queryForm.districtId = ''
              this.queryForm.communityId = ''
              this.queryForm.buildId = ''
              this.queryForm.unitId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseCity':
              this.queryForm.districtId = ''
              this.queryForm.communityId = ''
              this.queryForm.buildId = ''
              this.queryForm.unitId = ''
              this.districts = []
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseRegin':
              this.queryForm.communityId = ''
              this.queryForm.buildId = ''
              this.queryForm.unitId = ''
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseCommunity':
              this.queryForm.buildId = ''
              this.queryForm.unitId = ''
              this.buildings = []
              this.units = []
              return
            case 'chooseBuliding':
              this.queryForm.unitId = ''
              this.units = []
              return
          }
        }
      } else if (param === 'addHouse') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.addHouseForm.cityId = ''
                this.addHouseForm.districtId = ''
                this.addHouseForm.communityId = ''
                this.addHouseForm.buildingId = ''
                this.addHouseForm.unitId = ''
                this.citys = []
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.units = []
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.addHouseForm.districtId = ''
                this.addHouseForm.communityId = ''
                this.addHouseForm.buildingId = ''
                this.addHouseForm.unitId = ''
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.units = []
                this.districts = data
              })
              return
            case 'chooseRegin':
              selectAllCommunity(rowId).then(({ data: { data } }) => {
                this.addHouseForm.communityId = ''
                this.addHouseForm.buildingId = ''
                this.addHouseForm.unitId = ''
                this.communitys = []
                this.buildings = []
                this.units = []
                this.communitys = data
              })
              return
            case 'chooseCommunity':
              selectByCommunityIdBuilding(rowId).then(({ data: { data } }) => {
                this.addHouseForm.buildingId = ''
                this.addHouseForm.unitId = ''
                this.buildings = []
                this.units = []
                this.buildings = data
                const datas = this.communitys.find(item => item.rowId === rowId)
                this.addHouseForm.communityName = datas.name
              })
              return
            case 'chooseBuliding':
              selectByBuildingUnit(rowId).then(({ data: { data } }) => {
                this.addHouseForm.unitId = ''
                this.units = []
                this.units = data
                const datas = this.buildings.find(item => item.rowId === rowId)
                this.addHouseForm.buildingName = datas.name
              })
              return
            case 'chooseUnit':
              selectByBuildingUnit(this.addHouseForm.buildId).then(
                ({ data: { data } }) => {
                  this.units = data
                  const datas = this.units.find(item => item.rowId === rowId)
                  this.addHouseForm.unitName = datas.name
                }
              )
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.addHouseForm.cityId = ''
              this.addHouseForm.districtId = ''
              this.addHouseForm.communityId = ''
              this.addHouseForm.buildId = ''
              this.addHouseForm.unitId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseCity':
              this.addHouseForm.districtId = ''
              this.addHouseForm.communityId = ''
              this.addHouseForm.buildId = ''
              this.addHouseForm.unitId = ''
              this.districts = []
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseRegin':
              this.addHouseForm.communityId = ''
              this.addHouseForm.buildId = ''
              this.addHouseForm.unitId = ''
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseCommunity':
              this.addHouseForm.buildId = ''
              this.addHouseForm.unitId = ''
              this.buildings = []
              this.units = []
              return
            case 'chooseBuliding':
              this.addHouseForm.unitId = ''
              this.units = []
              return
          }
        }
      }
    },
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该房屋, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteHouse(rowId).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    openCreateDialog() {
      this.addHouseForm = {}
      this.citys = []
      this.districts = []
      this.communitys = []
      this.buildings = []
      this.units = []
      this.addHouseFormVisible = true
      this.$refs.addHouseForm && this.$refs.addHouseForm.resetFields()
    },
    saveHouseForm() {
      this.$refs.addHouseForm.validate(valid => {
        if (valid) {
          if (
            this.addHouseForm.unitId === '' ||
            this.addHouseForm.unitId === undefined
          ) {
            this.$message({
              showClose: true,
              message: '请选择单元',
              type: 'warning'
            })
          } else {
            saveHouse(this.addHouseForm).then(
              ({ data: { data, msg, code } }) => {
                if (code === 0) {
                  this.doQuery()
                  this.addHouseFormVisible = false
                }
                this.$message({
                  showClose: true,
                  message: msg,
                  type: code === 0 ? 'success' : 'error'
                })
              }
            )
          }
        } else {
          return false
        }
      })
    },
    upgradeAdmin({ rowId, userId, houseId }) {
      this.exampleForm.rowId = rowId
      this.exampleForm.userId = userId
      this.exampleForm.houseId = houseId
      upgradeOwner(this.exampleForm).then(({ data: { data, msg, code } }) => {
        if (code === 0) {
          this.queryResidentById(this.exampleForm.residentId)
        }
        this.$message({
          showClose: true,
          message: msg,
          type: code === 0 ? 'success' : 'error'
        })
      })
    },
    setVideoCall({ memberUserId, isVideoCall, houseId }) {
      this.exampleForm = {}
      this.exampleForm.residentId = houseId
      if (isVideoCall === '0') {
        this.exampleForm.rowId = memberUserId
        this.exampleForm.isVideoCall = 1
        editVideoCall(this.exampleForm).then(
          ({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.queryResidentById(this.exampleForm.residentId)
            }
            this.$message({
              showClose: true,
              message: '视频通话设置成功',
              type: code === 0 ? 'success' : 'error'
            })
          }
        )
      }
      if (isVideoCall === '1' || isVideoCall === undefined) {
        this.exampleForm.rowId = memberUserId
        this.exampleForm.isVideoCall = 0
        editVideoCall(this.exampleForm).then(
          ({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.queryResidentById(this.exampleForm.residentId)
            }
            this.$message({
              showClose: true,
              message: '视频通话设置成功',
              type: code === 0 ? 'success' : 'error'
            })
          }
        )
      }
    },
    setPriority({ houseId, callLevel, userId }) {
      this.detailForm = []
      this.detailForm.houseId = houseId
      this.detailForm.callLevel = callLevel
      this.detailForm.userId = userId
      updatePriority(this.detailForm).then(({ data: { data, msg, code } }) => {
        if (code === 0) {
          this.queryResidentById(this.exampleForm.residentId)
        }
        this.$message({
          showClose: true,
          message: '优先级设置成功',
          type: code === 0 ? 'success' : 'error'
        })
      })
    },
    delResident({ rowId }) {
      this.$confirm('此操作将永久删除该住户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteResident(rowId).then(({ data: { data, msg } }) => {
          this.queryResidentById(this.exampleForm.residentId)
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    queryResidentById(rowId) {
      this.loading = true
      this.exampleForm.residentId = rowId
      selectResidentByHouseId(rowId).then(({ data: { code, data, msg } }) => {
        this.detailFormVisible = true
        this.detailRecords = data
        this.loading = false
      })
    },
    queryDoorById(rowId) {
      this.loading = true
      this.doorCardList = []
      queryDoorCardNoAndExpDateByHouseId(rowId).then(
        ({ data: { code, data, msg } }) => {
          if (data[0] === null) {
            this.doorCardList = []
          } else if (data[0] !== null) {
            this.doorCardList = data
          }
          this.doorCardFormVisible = true
          this.doorCardForm.houseId = rowId
          this.loading = false
        }
      )
    },
    openDoorCardDialog(houseId) {
      this.editForm = {}
      this.cardBatch = false
      this.showCardNo = false
      this.editForm.houseId = houseId
      this.doorCardDialogFormVisible = true
      this.$refs.editForm && this.$refs.editForm.resetFields()
    },
    editExample({
      rowId,
      communityId,
      buildingId,
      unitId,
      floorId,
      number,
      openPhone,
      status,
      tag
    }) {
      this.exampleForm = {}
      this.$refs.exampleForm && this.$refs.exampleForm.resetFields()
      this.dialogFormVisible = true
      this.exampleForm = {
        rowId: rowId,
        communityId: communityId,
        buildingId: buildingId,
        unitId: unitId,
        floorId: floorId,
        number: number,
        openPhone: openPhone,
        status: status,
        tag: tag
      }
      // querHouseDetail(rowId).then(({ data: { code, data, msg }}) => {
      //   this.dialogFormVisible = true
      //   if (code === 0) {

      //   }
      // })
    },
    editHouse() {
      this.$refs.exampleForm.validate(valid => {
        if (valid) {
          saveHouse(this.exampleForm).then(({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.doQuery()
              this.dialogFormVisible = false
            }
            this.$message({
              showClose: true,
              message: msg,
              type: code === 0 ? 'success' : 'error'
            })
          })
        } else {
          return false
        }
      })
    },
    chooseCardAccess(val) {
      if (val === '0') {
        this.cardBatch = true
        this.showCardNo = true
      } else {
        this.cardBatch = false
        this.showCardNo = false
      }
    },
    getCardNo() {
      this.editForm.type = '1'
      queryDoorCardByBatchNo(
        this.editForm.batchNo,
        this.editForm.houseId,
        this.editForm.type
      ).then(({ data: { code, data, msg } }) => {
        this.editForm = {
          cardNo: data.cardNo,
          batchNo: this.editForm.batchNo,
          cardBatchId: data.cardBatchId,
          rowId: data.rowId,
          houseId: this.editForm.houseId,
          cardAccess: this.editForm.cardAccess
        }
      })
    },
    addDoorCardHouse(rowId) {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          addDoorCardHouseAndUpdateDoorCard(this.editForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doorCardDialogFormVisible = false
                this.queryDoorById(this.doorCardForm.houseId)
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    handleLogOut(rowId) {
      this.$confirm('此操作将注销该门禁卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelDoorCard(rowId).then(({ data: { data, msg } }) => {
          this.queryDoorById(this.doorCardForm.houseId)
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    doorCardGrant(row) {
      if (row.isWarrant === undefined) {
        row.isWarrant = ''
      }
      this.$confirm(
        (row.isWarrant === '0') | (row.isWarrant === '')
          ? '确认授权?'
          : '确认解除授权?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        grantDoorCard(row.rowId, row.isWarrant).then(({ data: { msg } }) => {
          this.queryDoorById(this.doorCardForm.houseId)
          this.$message({
            showClose: true,
            message:
              (row.isWarrant === '0') | (row.isWarrant === '')
                ? '授权成功'
                : '解除授权成功',
            type: 'success'
          })
        })
      })
    },
    LossCard(rowId) {
      this.$confirm('此操作将挂失该门禁卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        reportTheLoss(rowId).then(({ data: { data, msg } }) => {
          this.queryDoorById(this.doorCardForm.houseId)
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    activationCard(rowId) {
      this.$confirm('此操作将激活该门禁卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        activationDoorCard(rowId).then(({ data: { data, msg } }) => {
          this.queryDoorById(this.doorCardForm.houseId)
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    doorCardDelete(rowId) {
      this.$confirm('此操作将删除该门禁卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDoorCard(rowId).then(({ data: { data, msg } }) => {
          this.queryDoorById(this.doorCardForm.houseId)
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    dcWrite(cardNo, rowId) {
      this.doorCardDelayForm.cardNo = cardNo
      let ret
      let serialNumber
      // 调用控件对象dc_init方法，初始化端口
      ret = this.reader.dc_init(100, 115200)
      // 成功则返回串口标识符>0，失败返回负值，见错误代码表
      if (ret < 0) {
        alert('初始化失败！')
        return
      } else if (ret > 0) {
        // 发卡
        ret = this.reader.dc_card_double(0) // 0为单卡操作模式
        serialNumber = this.reader.get_bstrRBuffer_asc
        if (ret !== 0) {
          alert('未发现卡片！')
          this.reader.dc_beep(10)
          this.reader.dc_exit()
          return
        } else {
          // 密钥加载及认证
          this.reader.put_bstrSBuffer_asc = 'FDB0916AC12FFF07806977681FE2ABC9'
          this.reader.dc_load_key(0, 13)
          ret = this.reader.dc_authentication(0, 13)
          if (ret !== 0) {
            alert('认证失败')
            this.reader.put_bstrSBuffer_asc = 'FFFFFFFFFFFFFF078069FFFFFFFFFFFF' // 还原设备认证key
            this.reader.dc_load_key(0, 13)
            this.reader.dc_beep(10)
            this.reader.dc_exit()
            return
          } else {
            this.reader.put_bstrSBuffer_asc =
              this.doorCardDelayForm.cardNo + '000000000000'
            ret = this.reader.dc_write(52)
            if (ret !== 0) {
              this.reader.dc_beep(10)
              this.reader.put_bstrSBuffer_asc =
                'FFFFFFFFFFFFFF078069FFFFFFFFFFFF' // 还原设备认证key
              this.reader.dc_load_key(0, 13)
              this.reader.dc_exit()
              alert('写入失败！')
              return
            } else {
              this.reader.put_bstrSBuffer_asc =
                'FFFFFFFFFFFFFF078069FFFFFFFFFFFF' // 还原设备认证key
              this.reader.dc_load_key(0, 13)
              this.reader.dc_beep(100)
              this.reader.dc_exit()
              editDoorCard(rowId, serialNumber).then(
                ({ data: { data, msg } }) => {
                  this.$message({
                    showClose: true,
                    message: '发卡成功！',
                    type: 'success'
                  })
                }
              )
            }
          }
        }
      }
    },
    doorCardDelay(rowId, expDate) {
      this.doorCardDelayForm = {
        rowId: rowId,
        expdate: expDate
      }
      this.doorCardDelayFormVisible = true
      this.$refs.doorCardDelayForm && this.$refs.doorCardDelayForm.resetFields()
    },
    /**
     * 延期
     */
    saveDoorCardDelay(doorCardDelayForm) {
      this.$refs.doorCardDelayForm.validate(valid => {
        if (valid) {
          editDoorCardDelay(
            doorCardDelayForm.rowId,
            doorCardDelayForm.expdate
          ).then(({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.doorCardDelayFormVisible = false
              this.queryDoorById(this.doorCardForm.houseId)
            }
            this.$message({
              showClose: true,
              message: msg,
              type: code === 0 ? 'success' : 'error'
            })
          })
        } else {
          return false
        }
      })
    }
  },
  components: {}
}
</script>

<style scoped>
.upload-demo {
  line-height: 32px;
}
</style>
